import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, { ProFormList } from '@ant-design/pro-form';
import { useEffect, useRef, useState } from 'react';
import { Image, Spin } from 'antd';
import styles from '../index.less';
import { getParkDetail } from '../service';
import type { getParkDetails } from '../types';
import { addParkBase, getCity } from '../utils';
import QRCode from '@/components/qrCode';

export default (props: { id?: string }) => {
  const { id } = props;
  const formRef = useRef<ProFormInstance>();
  const [details, setDetails] = useState<getParkDetails>();
  const [spinVisible, setSpinVisible] = useState(false);

  useEffect(() => {
    if (id) {
      setSpinVisible(true);
      getParkDetail(id).then((res) => {
        if (res && res.code == 0) {
          setDetails(res.data);
          formRef.current?.setFieldsValue({ test: [...Array(res.data.channels.length)] });
          setSpinVisible(false);
        }
      });
    }
  }, []);

  const autoReleaseText = (e?: string) => {
    if (e) {
      let text = '';
      const autoRelease = e.split(',');
      for (let i = 0; i < autoRelease.length; i++) {
        if (i < autoRelease.length - 1) {
          text = text + addParkBase.autoRelease[Number(autoRelease[i]) - 1] + ',';
        } else {
          text = text + addParkBase.autoRelease[Number(autoRelease[i]) - 1];
        }
      }
      return text;
    }
  };
  const releaseModeText = (e?: string) => {
    if (e) {
      let text = '';
      const releaseMode = e.split(',');

      for (let i = 0; i < releaseMode.length; i++) {
        if (i < releaseMode.length - 1) {
          text = text + addParkBase.releaseMode[Number(releaseMode[i]) - 1] + ',';
        } else {
          text = text + addParkBase.releaseMode[Number(releaseMode[i]) - 1];
        }
      }
      return text;
    }
  };
  // const getQRCode = (index: number) => {
  //   const a = QRCode.toDataURL(
  //     `https://offroad.parking.movebroad.com/wxapp/paying?channelId=${details?.channels[index].channelId}`,
  //     function (err, dataUri) {
  //       if (err) {
  //         console.error(err);
  //         return;
  //       }
  //       return dataUri;
  //       setQrCodeDataUri(dataUri);
  //     },
  //   );
  // };
  return (
    <Spin spinning={spinVisible}>
      <ProCard className={styles.card} style={{ marginBottom: 20 }} bordered={false}>
        <ProDescriptions title="停车场信息">
          <ProDescriptions.Item label="停车场编号">{details?.id}</ProDescriptions.Item>
          <ProDescriptions.Item label="最大超时离场时间">
            {details?.maxLeaveTime}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="通道总数">{details?.channels?.length}</ProDescriptions.Item>
          <ProDescriptions.Item label="停车场名称">{details?.name}</ProDescriptions.Item>
          <ProDescriptions.Item label="停车场地址">
            {getCity(details?.addressCode || 0)}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="停车场总计车位数">
            {details?.spaceTotalCount}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="收费规则">{details?.schemeName}</ProDescriptions.Item>
          <ProDescriptions.Item label="停车联系人">{details?.creatorName}</ProDescriptions.Item>
          <ProDescriptions.Item label="停车可用车位数">{details?.spaceCount}</ProDescriptions.Item>
          <ProDescriptions.Item label="停车场创建时间">{details?.createTime}</ProDescriptions.Item>
          <ProDescriptions.Item label="停车场联系方式">{details?.phone}</ProDescriptions.Item>
          <ProDescriptions.Item label="停车场剩余车位数">
            {details?.spaceFreeCount}
          </ProDescriptions.Item>
        </ProDescriptions>
      </ProCard>
      <ProForm formRef={formRef} submitter={false}>
        {details?.channels[0] && (
          <ProCard title="通道信息" className={styles.card} bordered={false}>
            <ProFormList
              name="test"
              copyIconProps={false}
              creatorButtonProps={false}
              deleteIconProps={false}
              actionGuard={{
                beforeAddRow: async (defaultValue, insertIndex, count) => {
                  return new Promise((resolve) => {
                    resolve(true);
                  });
                },
              }}
            >
              {(
                meta, //当前行的基本信息
                index, //当前的行号
                action, //操作行的快捷方法
                count, //总行数
              ) => (
                <ProCard
                  extra={
                    <div>
                      付费二维码：
                      <QRCode channelId={details?.channels[index].channelId} />
                    </div>
                  }
                  title={<div>通道 {index + 1}</div>}
                  type="inner"
                  bordered
                  style={{ marginBottom: 10 }}
                >
                  <ProDescriptions>
                    <ProDescriptions.Item label="通道编号">
                      {details?.channels[index].channelId}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="主相机配置">
                      {details?.channels[index].masterCamera?.name}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="辅助相机配置">
                      {details?.channels[index].secondCamera?.name}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="通道名称">
                      {details?.channels[index].channelName}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="主相机型号">
                      {details?.channels[index].masterCamera?.model}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="辅助相机型号">
                      {details?.channels[index].secondCamera?.model}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="通道类型">
                      {addParkBase.channelType[Number(details?.channels[index].channelType) - 1]}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="主相机IP地址">
                      {details?.channels[index].masterCamera?.ip}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="辅助相机IP地址">
                      {details?.channels[index].secondCamera?.ip}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="通道图片">
                      {details?.channels[index]?.channelImageUrl && (
                        <Image height={20} src={details?.channels[index]?.channelImageUrl} />
                      )}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="主相机端口号">
                      {details?.channels[index].masterCamera?.port}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="辅助相机端口号">
                      {details?.channels[index].secondCamera?.port}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="放行模式">
                      {releaseModeText(details?.channels[index].releaseMode)}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="主相机用户名">
                      {details?.channels[index].masterCamera?.username}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="辅助相机用户名">
                      {details?.channels[index].secondCamera?.username}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="放行规则">
                      {autoReleaseText(details?.channels[index].autoRelease)}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="主相机是否启用">
                      {details?.channels[index].masterCamera?.enable ? '是' : '否'}
                    </ProDescriptions.Item>
                    <ProDescriptions.Item label="辅助相机是否启用">
                      {details?.channels[index].secondCamera?.enable ? '是' : '否'}
                    </ProDescriptions.Item>
                  </ProDescriptions>
                </ProCard>
              )}
            </ProFormList>
          </ProCard>
        )}
      </ProForm>
    </Spin>
  );
};
